<template>
	<div class="index ml-echarts">
	<leftNav></leftNav>
	</div>
</template>

<script>
	export default {

		data() {
			return {

			}
		},
		created() {

		},
		mounted() {
			this.$myEchart({
				'options': {
					title: {
						text: '基础雷达图'
					},
					tooltip: {},
					legend: {
						data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
					},
					radar: {
						// shape: 'circle',
						name: {
							textStyle: {
								color: '#fff',
								backgroundColor: '#999',
								borderRadius: 3,
								padding: [3, 5]
							}
						},
						indicator: [{
								name: '销售（sales）',
								max: 6500
							},
							{
								name: '管理（Administration）',
								max: 16000
							},
							{
								name: '信息技术（Information Techology）',
								max: 30000
							},
							{
								name: '客服（Customer Support）',
								max: 38000
							},
							{
								name: '研发（Development）',
								max: 52000
							},
							{
								name: '市场（Marketing）',
								max: 25000
							}
						]
					},
					series: [{
						name: '预算 vs 开销（Budget vs spending）',
						type: 'radar',
						// areaStyle: {normal: {}},
						data: [{
								value: [4300, 10000, 28000, 35000, 50000, 19000],
								name: '预算分配（Allocated Budget）'
							},
							{
								value: [5000, 14000, 28000, 31000, 42000, 21000],
								name: '实际开销（Actual Spending）'
							}
						]
					}]
				},
				"styles": {
					width: '1200px',
					height: "800px",
				}
			});
		},
		computed: {

		},
		methods: {

		}
	}
</script>

<style lang="less" scoped="scoped">
	.ml-echarts {
		display: flex;

		section {
			text-align: justify;
			margin-top: 30px;
			line-height: 48px;
			font-size: 18px;
		}
	}
</style>
